<template>
  <view class="body">
    <uni-nav-bar
      left-icon="back"
      title="编辑选择"
      status-bar="true"
      fixed="true"
      @clickLeft="backs"
    ></uni-nav-bar>
    <view class="container">
      <view class="box">
        <view class="box_edit">
          <image src="/static/edit/tag.png" />
          <input type="text" placeholder="决定标题" @input="changeTitle" />
        </view>
        <view class="box_edit" @click="plus">
          <image src="/static/edit/plus.png" />
          <input type="text" value="添加" disabled />
        </view>
        <view class="box_edit" v-for="(item, index) in list.list" :key="index">
          <image src="/static/edit/delete.png" @click="del(index)" />
          <input
            type="text"
            placeholder="选项"
            :value="item.name"
            @input="
              (e) => {
                changeValue(e, index);
              }
            "
          />
        </view>
        <!-- <view class="box_edit" @click="ctrlV">
          <image src="/static/edit/ctrlV.png" />
          <input type="text" value="从粘贴板添加" disabled />
        </view> -->
      </view>
    </view>
    <view class="button_box"></view>
    <view class="bottom">
      <button @click="save">保存</button>
    </view>
  </view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  components: { uniNavBar },
  onLoad() {
  },
  data() {
    return {
      list: {
        title: "",
        list: [{ name: "" }, { name: "" }],
      },
    };
  },
  methods: {
    del(index) {
      console.log(index);
      this.list.list = this.list.list.filter((item, i) => {
        return i != index;
      });
      console.log(this.list.list, "del");
    },
    changeTitle(e) {
      this.list.title = e.target.value;
    },
    changeValue(e, index) {
      this.list.list[index].name = e.target.value;
    },
    plus() {
      // if (this.list.list.length >= 8) {
      //   uni.showToast({ title: "最多添加八个选项", icon: "none" });
      //   return;
      // }
      this.list.list.push({ name: "" });
    },
    ctrlV() {},
    backs() {
      console.log("ok");
      uni.navigateBack({
        delta: 1,
      });
    },
    save() {
      let flag = true;
      if (this.list.list.length < 4) {
        uni.showToast({
          title: "选项最少为四项哦~",
          icon: "none",
        });
        return;
      }
      if(this.list.list.length%2!==0&&this.list.list.length>=4){
        uni.showToast({
          title:'选项必须为偶数哦~',
          icon:'none',
        });
        return
      }
      console.log(this.list.list, "save");
      this.list.list.forEach((item) => {
        console.log(item.name);
        if (!item.name) {
          flag = false;
        }
      });
      if (flag) {
        if (!this.list.title) {
          uni.showToast({
            title: "请填写标题哦~",
            icon: "none",
          });
        } else {
          let list = uni.getStorageSync("list");
          if (list) {
            list = JSON.parse(list);
            list.push(this.list);
            uni.setStorageSync("list", JSON.stringify(list));
          } else {
            let list = [];
            list.push(this.list);
            uni.setStorageSync("list", JSON.stringify(list));
          }
          uni.switchTab({
            url: "/pages/index/index",
          });
        }
      } else {
        uni.showToast({
          title: "请填写所有为空的选项哦~",
          icon: "none",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  /* height: 100%; */
  .container {
    width: 100%;
    height: 100%;
  }
}
.box {
  width: 90%;
  margin-left: 5%;
  .box_edit {
    width: 100%;
    height: 100upx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20upx;
    background: #ddd;
    margin: 20upx 0;
    image {
      width: 60upx;
      height: 60upx;
      padding-left: 20upx;
    }
    input {
      width: 90%;
      height: 100upx;
      flex: 1;
      margin-left: 10upx;
    }
  }
}
.bottom {
  position: fixed;
  width: 100%;
  height: 100upx;
  bottom: 0%;
  left: 0%;
  button {
    width: 100%;
    height: 100upx;
  }
}
.button_box {
  width: 100%;
  height: 100upx;
}
</style>